<!--
 * @Descripttion: 查看弹窗内容组件
 * @version: 电子名片2.0
 * @Author: 冯健
 * @Date: 2020-12-03 15:13:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-27 16:20:45
-->
<template>
  <el-row>
    <el-col
      v-for="text in textList"
      :key="text.key"
      :span="text.span || 12"
      class="dialog-box"
    >
      <template v-if="text.type === 'txt'">
        <span class="dialog-t1">{{ text.title }}</span>
        <span v-if="text.isTemplate" class="dialog-t2"><slot :name="text.key" /></span>
        <span v-else class="dialog-t2">{{ detailInfo[text.key] || '暂无' }}</span>
      </template>
      <template v-else-if="text.type === 'image'">
        <span class="dialog-t1">{{ text.title }}</span>
        <el-image
          :style="text.style || 'width: 80%'"
          :src="detailInfo[text.key] || defaultUrl"
          :preview-src-list="[detailInfo[text.key] || defaultUrl]"
        />
      </template>
      <template v-else-if="text.type === 'image-group'">
        <span class="dialog-t1">{{ text.title }}</span>
        <span class="img-box" >
          <el-image
            v-for="(item ,index) in detailInfo[text.key]"
            style="width: 150px; height: 200px"
            :key="index"
            :src="item"
            :preview-src-list="detailInfo[text.key]"
            >
          </el-image>
        </span>
        <!-- <slot :name="text.key" /> -->
      </template>
      <template v-else-if="text.type === 'textarea'">
        <span class="dialog-t1" style="margin-bottom: 15px;display: block;">{{ text.title }}</span>
        <el-input
          type="textarea"
          :value="detailInfo[text.key] || '暂无'"
          v-html="detailInfo[text.key] || '暂无'"
          :disabled="true"
          maxlength="500"
          show-word-limit
        />
      </template>
      <template v-else-if="text.type === 'video'">
        <slot name="video" />
      </template>
      <template v-else-if="text.type === 'audio'">
        <!-- <span class="dialog-t1">{{ text.title }}</span> -->
        <slot  name="audio" />
      </template>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    textList: {
      type: Array,
      default() {
        return []
      }
    },
    detailInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      defaultUrl: ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-textarea__inner{
  height: 150px;
}
.el-image{
  vertical-align: middle;
}
.dialog-t1 {
  font-size: 14px;
  font-weight: bold;
  color: #606266;
  vertical-align: middle;
}
.dialog-t2 {
  font-size: 14px;
  color: #606266;
}
.dialog-box {
  margin-bottom: 22px;
}
.img-box {
  display: flex;
  // flex-wrap: wrap;
   justify-content: space-around;
  // width: 200px;
  // height: 100px;
}
</style>
